<template>
  <div class="classroom-container">
    <div ref="mapContainer" class="map-container"></div>
    <div v-if="loading" class="loading-overlay">
      <div class="loader-text">
        <el-icon class="is-loading" :size="32"><Loading /></el-icon>
        <p>3D教室模型加载中... {{ loadingProgress }}%</p>
      </div>
    </div>

    <div class="back-button-container">
      <el-button type="info" :icon="Back" circle @click="goBack"></el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { useRouter } from 'vue-router'; // 引入 useRouter
import { Back } from '@element-plus/icons-vue'; // 引入返回图标

const mapContainer = ref(null);
const loading = ref(true);
const loadingProgress = ref(0);
let renderer, scene, camera, controls;
const router = useRouter(); // 初始化 router

onMounted(() => {
  initThree();
});

onUnmounted(() => {
  // 清理资源
  renderer.dispose();
  scene.clear();
});

const initThree = () => {
  // 场景
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0xf0f0f0);

  // 相机
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.set(0, 84, 28);


  // 渲染器
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(mapContainer.value.clientWidth, mapContainer.value.clientHeight);
  mapContainer.value.appendChild(renderer.domElement);

  // 控制器
  controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;

  // 光照
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
  scene.add(ambientLight);
  const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
  directionalLight.position.set(5, 10, 7.5);
  scene.add(directionalLight);

  // 加载模型
  const loader = new GLTFLoader();
  // 注意：您需要将 'classroom.glb' 替换为您下载的3D模型文件路径，并将其放入 `public` 文件夹下
  loader.load('/models/scene.gltf', (gltf) => {
    const model = gltf.scene;
    scene.add(model);
    loading.value = false;
  }, (xhr) => {
    loadingProgress.value = Math.round((xhr.loaded / xhr.total) * 100);
  }, (error) => {
    console.error('An error happened', error);
    loading.value = false;
  });

  // 动画循环
  const animate = () => {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
  };
  animate();

  // 窗口大小调整
  window.addEventListener('resize', onWindowResize);
};

const onWindowResize = () => {
  camera.aspect = mapContainer.value.clientWidth / mapContainer.value.clientHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(mapContainer.value.clientWidth, mapContainer.value.clientHeight);
};

// 返回按钮点击事件处理
const goBack = () => {
  // 可以使用 router.back() 返回上一页
  router.back();
  // 或者使用 router.push() 精确跳转到 ClassroomBooking 页面
  // router.push({ name: 'ClassroomBooking' });
};
</script>

<style scoped>
.classroom-container {
  width: 100%;
  height: calc(100vh - 100px);
  position: relative; /* 确保容器是定位上下文 */
}
.map-container {
  width: 100%;
  height: 100%;
}
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
.loader-text {
  text-align: center;
  font-size: 1.2rem;
  color: #333;
}

/* 返回按钮容器样式 */
.back-button-container {
  position: absolute;
  top: 20px; /* 距离顶部20px */
  right: 20px; /* 距离右侧20px */
  z-index: 11; /* 确保按钮在加载层之上 */
}
</style>